---
import { Image } from 'astro:assets'
import Github from '../assets/github.svg'
import Unicorn from '../assets/unicorn.svg'
import CloudA from '../assets/cloud-a.svg'
import CloudB from '../assets/cloud-b.svg'
import HeroMobile from '../assets/hero-mobile.svg'
import MediaImage from './MediaImage.astro'
---

<div class="hero-container">
    <MediaImage
        class="hero"
        image={Unicorn}
        mediaQuery='(min-width: 700px)'
    />
    <MediaImage
        class="cloud-a"
        image={CloudA}
        mediaQuery='(min-width: 700px)'
    />
    <MediaImage
        class="cloud-b"
        image={CloudB}
        mediaQuery='(min-width: 700px)'
    />
</div>
<div class="hero-gradient"></div>
<MediaImage
    class="hero-mobile"
    image={HeroMobile}
    mediaQuery='(max-width: 699px)'
/>
<picture>
    <source
        src={HeroMobile.src}
        media="(max-width: 699px)"
    />
</picture>
<div class="hero-mobile-gradient"></div>
<div class="scroll-target"></div>
<section class="welcome">
    <h1>
        Welcome to
        <span class="bold">Unistyles 2.0</span>
    </h1>
    <h2>Level up your React Native StyleSheet!</h2>
    <div class="buttons">
        <a href="/start/introduction/">
            <button class="primary"> Get Started</button>
        </a>
        <a
            href="https://github.com/jpudysz/react-native-unistyles"
            target="_blank"
        >
            <button>
                <Image class="github" src={Github} alt="" />
                    Github
            </button>
        </a>
    </div>
</section>
<div class="scroll">
    Click to scroll
    <svg class="scroll__icon" xmlns="http://www.w3.org/2000/svg" width="30" height="12" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m1 1 14.104 9L29 1"/></svg>
</div>

<script>
    import { scroll, timeline } from 'motion'

    const scrollTarget = document.querySelector<HTMLDivElement>('.scroll-target')!
    const cloudA = document.querySelector<HTMLDivElement>('.cloud-a')!
    const cloudB = document.querySelector<HTMLDivElement>('.cloud-b')!
    const scrollButton = document.querySelector<HTMLDivElement>('.scroll')!

    scroll(timeline([
        [cloudA, { transform: ['translateX(0%)', 'translateX(-5%)'] }, { at: '<' } ],
        [cloudB, { transform: ['translateX(0%)', 'translateX(5%)'] }, { at: '<' } ],
    ]), {
        smooth: 1,
        target: scrollTarget
    })

    scrollButton.addEventListener('click', () => {
        document.querySelector('#features')?.scrollIntoView({ behavior: 'smooth', block: 'start' })
    })
</script>

<style>
    @keyframes rainbow {
        0% {
            filter: hue-rotate(0deg);
        }
        50% {
            filter: hue-rotate(-90deg);
        }
        100% {
            filter: hue-rotate(0deg);
        }
    }

    .hero {
        position: absolute;
        z-index: 10;
        animation: rainbow 20s infinite;
    }

    .unicorn,
    .cloud-a,
    .cloud-b {
        height: auto;
        position: absolute;
    }

    .hero-mobile {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: auto;
        z-index: 20;
    }

    .hero-mobile-gradient {
        position: absolute;
        width: 100vw;
        height: 180vw;
        top: 80vw;
        left: 0;
        mask-image: linear-gradient(to bottom, transparent 0%, black 10vw, black 10vw, transparent 100%);
        z-index: 20;
        background: linear-gradient(to bottom, #fbece9, ease-in-out, #aa98d0);

        @media (min-width: 700px) {
            display: none;
        }
    }

    .scroll-target {
        pointer-events: none;
        inset: 0;
        position: absolute;
        height: 200vh;
        width: 0;
    }

    .unicorn {
        width: 100vw;
        z-index: 10;
        inset: 0;
        animation: rainbow 20s infinite;
    }

    .cloud-a {
        z-index: 20;
        width: 69vw;
        top: 34.5vw;
        left: 12.5vw;
    }

    .cloud-b {
        z-index: 10;
        width: 69vw;
        top: 32vw;
        left: 42.5vw;
    }

    .hero-gradient {
        width: 100%;
        aspect-ratio: 1.5;
        background: radial-gradient(
            50% 50% at 50% 50%,
            #2d0bb5,
            cubic-bezier(0.3, 0, 0.5, 0.5),
            transparent
        );
        position: absolute;
        left: -30vw;
        top: 50vw;

        @media (min-width: 700px) {
            left: 0;
            top: 20vw;
        }
    }

    .welcome {
        position: relative;
        color: var(--black);
        z-index: 20;
        margin-top: 100vw;
        padding: 0 20px;

        @media (min-width: 700px) {
            padding: 22vw 11vw;
            margin-top: 0;
        }
    }

    h1 {
        font-size: clamp(48px, 3.5vw, 74px);
        font-weight: 500;
        line-height: clamp(52px, 4vw, 90px);
    }

    h2 {
        font-size: clamp(20px, 1.5vw, 32px);
        font-weight: 600;
        margin-left: 1%;
    }

    .bold {
        font-weight: 700;
    }

    .buttons {
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
        gap: 16px;
        width: 100%;

        @media (min-width: 700px) {
            justify-content: flex-start;
        }

        a {
            width: 50%;

            @media (min-width: 700px) {
                width: auto;
            }
        }
    }

    button {
        font: inherit;
        font-size: 100%;
        border: none;
        padding: 16px 0px;
        width: 100%;
        border-radius: 100px;
        background-color: rgba(255, 255, 255, 0.5);
        color: var(--black);
        cursor: pointer;
        font-size: 20px;
        font-weight: 600;
        display: flex;
        gap: 10px;
        align-items: center;
        white-space: nowrap;
        display: flex;
        justify-content: center;
        align-items: center;

        @media (min-width: 700px) {
            padding: 16px 48px;
        }
    }

    .primary {
        background-color: var(--black);
        color: var(--white);
    }

    .github {
        width: 32px;
        height: auto;
    }

    .scroll {
        position: absolute;
        color: var(--pink);
        z-index: 50;
        left: 50%;
        top: calc(100vh - 200px);
        transform: translateX(-50%);
        flex-direction: column;
        align-items: center;
        gap: 16px;
        font-weight: 700;
        font-size: 16px;
        cursor: pointer;
        display: none;

        @media (min-aspect-ratio: 9/4) {
            color: var(--white);
        }

        @media (min-width: 700px) {
            display: flex;
        }

        &::selection {
            background-color: var(--background);
        }

        &__icon {
            width: 28px;
            height: auto;
            color: var(--pink);

            @media (min-aspect-ratio: 9/4) {
                color: var(--white);
            }
        }
    }
</style>
